Almost every website needs at least one contact form, just a way for users of the site to get in touch with the administrator, regardless of whether they have a user account or not. Fuse provides this capability with the 'ContactUs' app.

Simply enable the ContactUs app for your website and a 'Contact' link will appear in the site main menu, which will open a page with a simple form allowing users to send you a message. You can see the standard contact us page in your website by going to this path - /contactus

The source for the standard contactus page is here

 

Notifications and reporting

By default contact requests are sent by email to the Administrators group for your account. You can add and remove users to the Administrators group to change who receives the contact emails

If you would like non-admin users to receive the emails just change the group in the application settings and add users as appropriate to that group

You can also setup triggers in the Manage Auto Emails page in your Fuse admin console. Select the 'contact' event type.

Custom forms

Often the simple contact form won't be enough, and you will want to collect additional information from users such as their job title, country, what products they're interested in, etc

All inputs submitted from a contact form are captured in the contact requests database, so collecting additional information is just a matter of adding inputs to the form.

This can easily be done with basic HTML editing skills.

You should use the Kademi forms plugin, although its not required. To use it ensure you have added the jquery forms plugin to your page or template:

<script type="text/javascript" src="/static/jquery.forms/1.0.9/jquery.forms-1.0.9.js">//</script>

You should have a form element with method POST and action /contactus.

<form action="/contactus" method="POST" class="contactusForm" >

Add inputs to your form to collection information. Use the standard fields where possible for best integration into administration screens and reports. The standard fields are summarised here. Note field names are case sensitive and use camel case format.

Field Usage
firstName Intended to be the user's first name, ie Joe. Optional
surName Intended to be their last name, ie Smith. Optional
email Their email address. Mandatory
phone Their phone number. This is integrated with the SMS app, so if collecting mobile and land line use this for the mobile number. Optional.
company The name of their company. Optional.
message

The message that the user would like to send to the site. You will normally use a textarea to collect this.

For example, if using a bootstrap horizontal form a complete form might look like this:

<div class="form-group">
    <label class="col-sm-3 control-label" for="firstName">First name</label>
    <div class="col-sm-9">
        <input type="text" name="firstName" id="firstName" class="required form-control" placeholder="Enter your first name" value="$!user.thisUser.firstName" />
    </div>
</div>

Then use the jquery.forms plugin to initialise the form so it gets posted with ajax. You will need to display some sort of acknowledgement to the user that their request has been submitted. Eg:

    $("form.contactusForm").forms({
        callback: function() {
            $("form.contactus").animate({opacity: 0}, 500, function() {
                $("form.contactus").hide();
                $(".thankyou").show(100);
            });
        }
    });

 

Opt-ins

You will often want to allow your users to choose to receive additional information, or to accept terms and conditions, etc. In Kademi these are called "opt-ins". Kademi keeps a permanent record of users opting in. To add it to a form you simply need inputs where the name is optins and the value is the name of a group to be added to.

<label class="col-sm-9" for="optins_newsletter">
    <input type="checkbox" name="optins" value="newsletter" id="optins_newsletter" />
    Would you like to receive our newsletter?
</label>

1. Create a HTML page containing a form that POST's to the contactus app

This example shows integrating with the bootstrap3 theme. Create a page containing the following in its body section. The page can have any name and be in any folder, it will be posted to the action attribute of the form, which should be /contactus.

		<form action="/contactus" class="form-horizontal register-form" method="post" role="form">
		<div class="form-group">
		<label class="col-lg-4 control-label" for="firstName">First Name*</label>
		<div class="col-lg-8">
		<input class="form-control required" id="firstName" name="firstName" required="true" type="text" /></div>
		</div>
		<div class="form-group">
		<label class="col-lg-4 control-label" for="surName">Surname*</label>
		<div class="col-lg-8">
		<input class="form-control required" id="surName" name="surName" required="true" type="text" /></div>
		</div>
		<div class="form-group">
		<label class="col-lg-4 control-label" for="state">State*</label>
		<div class="col-lg-8">
		<input class="form-control required" id="state" name="state" required="true" type="text" /></div>
		</div>
		<div class="form-group">
		<label class="col-lg-4 control-label" for="email">Email*</label>
		<div class="col-lg-8">
		<input class="form-control email required" id="email" name="email" required="true" type="email" /></div>
		</div>
		<div class="form-group">
		<label class="col-lg-4 control-label"></label>
		<div class="col-lg-8">
		<label>
		<input id="shortly" name="call_me" type="radio" value="1" />
		Yes, please call me shortly</label>
		<label>
		<input id="six_month" name="call_me" type="radio" value="2" />
		Yes, please call me in 6 months time</label>
		<label>
		<input id="twelve_month" name="call_me" type="radio" value="3" />
		Yes, please call me in 12 months time</label>
		<label>
		<input id="no_thanks" name="call_me" type="radio" value="0" />
		No thank you</label>
		</div>
		</div>
		<div class="form-group hide">
		<label class="col-lg-4 control-label" for="phone">Phone*</label>
		<div class="col-lg-8">
		<input class="form-control" id="phone" name="phone" required="true" type="tel" disabled="disabled" /></div>
		</div>
		<div class="form-group">
		<div class="col-lg-offset-4 col-lg-8">
		<button class="btn btn-primary pull-right" type="submit">Register Now</button></div>
		</div>
		</form>

Important items to check:

  • Every input that you want to capture must have a unique name attribute
  • Any fields that are required should have the required='true' attribute
  • The submit button must be of type='submit'
  • The form element must have method='post' attribute

2. Integrate the Fuse forms jquery plugin

Add the following snippet after the form above. See the jquery forms plugin documentation for details.

		<script type="text/javascript">
		$(function() {
		$(".register-form").forms({
		confirmMessage: "Thank you for your request", // Can be any message you want. Many more options are available, please see js reference
		});
		});
		</script>

3. Test the page

Open the page in your web browser and check that the appropriate inputs are mandatory (ie that it wont submit unless they're filled in) and then submit some test messages. Then, in your admin console, go to Talk & Connect, then Manage Contact Requests, and check that the form submissions are appearing. Click through to the details for each one and check that any custom form inputs have been captured

Advanced Form Configuration

You can do far more then is shown here with contact forms. See advanced contact form configuration for more details.

Hide comments

Ask a question, or offer an answer